<template>
<div>
    <ul>
        <li v-for="item in arr" :key="item">
            {{ item }}
        </li>
    </ul>
    <button @click="revBtn">数组翻转</button> &nbsp;&nbsp;
    <button @click="sliceBtn">数组截取</button> &nbsp;&nbsp;
    <button @click="updateBtn">数组更新</button> &nbsp;&nbsp;
    <button @click="filterBtn">数组过滤</button> &nbsp;&nbsp;
</div>

</template>
<script>
export default {
    data() {
        return {
            //数组更新 更新和不更新
            arr: [1, 2, 3, 4, 5],
            arr2: [6,7,8,9]
        }
    },
    methods: {
        revBtn() { 
            //数组翻转 可以让v-for直接更新
            this.arr.reverse()
        },
        sliceBtn() { 
            // 数组截取 不会让v-for直接更新
            // slice(start,end) 截取数组，从start开始，到end结束，end不写默认一直截取到末尾
            
            console.log(this.arr.slice(0, 3));
            //解决方案
            // let newArr = this.arr.slice(0, 3)
            // console.log(newArr)
            // this.arr = newArr
            this.arr = this.arr.slice(0, 3);
        },
        updateBtn() { 
            //数组更新 更新和不更新 , 如果直接根据下标来修改 是可以直接更新的
           // this.arr[0] =6
        //    concat追加
       this.arr= this.arr.concat(this.arr2)
        },
        filterBtn() { 
            //简写方法
            // let item = this.arr.filter(item => item > 3);
            //原始方法
           let item = this.arr.filter(function (value, index, arr) { 
                console.log('index=',index);
                return value > 3
            })
            console.log(item);
           this.arr=item
        }
    }
}

</script>